<template>
   <div>
      <!-- 标题 -->
      <div class="title flex">{{Friends.length}}位朋友</div>
      <!-- 空状态 -->
       <el-empty v-if="Friends.length == 0" description="😶快去认识一些好朋友把!"></el-empty>
      <!-- 内容 -->
       <div v-else>
           <button v-for="item in Friends" :key="item.id" class="FriendsOne flex"  @click="ViewPersonalDetail(item)">
              <img  :src="item.headphoto" class="headphoto">
              <div id="name" class="overflow">{{item.username}}</div>
           </button>
       </div>
   </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
       ...mapState('Inform',['Friends'])
     },
     methods:{
      ...mapMutations('Chat',['SETDRAWER']),
       ViewPersonalDetail(item){
         this.SETDRAWER([1,item])   
      }
     }
  }
</script>
<style scoped lang='less'>
::v-deep .el-empty__description p{
   color: white !important;
}
// 标题
.title{
    margin: 20px 0;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--GeneralBackColor);
}
//内容
.FriendsOne{
   width: 100%;
   flex-wrap: nowrap;
   justify-content: flex-start;
   margin-bottom: 10px;

   img{
      border-radius: 5px;
      border: none;
   }

   #name{
      margin-left: 10px;
      width: 100%;
      text-align: left;
      
      font-size: 16px;
      font-weight: 600;
   }
}
</style>